<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${customer.id != null ? '编辑客户' : '新增客户'} + ' - 王氏美容汽车集团管理系统'">客户表单 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        .form-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .required {
            color: #dc3545;
        }
        .form-section {
            border-left: 4px solid #007bff;
            padding-left: 1rem;
            margin-bottom: 2rem;
        }
        .form-section h5 {
            color: #007bff;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-car me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/customers">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/dashboard">首页</a></li>
                        <li class="breadcrumb-item"><a href="/customers">客户管理</a></li>
                        <li class="breadcrumb-item active" th:text="${customer.id != null ? '编辑客户' : '新增客户'}">新增客户</li>
                    </ol>
                </nav>
                <h2>
                    <i class="fas fa-user-plus me-2" th:if="${customer.id == null}"></i>
                    <i class="fas fa-user-edit me-2" th:if="${customer.id != null}"></i>
                    <span th:text="${customer.id != null ? '编辑客户' : '新增客户'}">新增客户</span>
                </h2>
            </div>
            <div class="col-auto">
                <a href="/customers" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>返回列表
                </a>
            </div>
        </div>

        <!-- 错误消息 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i><span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- 表单 -->
        <div class="row">
            <div class="col-12">
                <div class="card form-card">
                    <div class="card-body">
                        <form th:action="@{/customers}" th:object="${customer}" method="post" novalidate>
                            <input type="hidden" th:field="*{id}">
                            
                            <!-- 基本信息 -->
                            <div class="form-section">
                                <h5><i class="fas fa-user me-2"></i>基本信息</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">客户姓名 <span class="required">*</span></label>
                                        <input type="text" class="form-control" id="name" th:field="*{name}" 
                                               th:classappend="${#fields.hasErrors('name')} ? 'is-invalid'" 
                                               placeholder="请输入客户姓名" required>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">手机号码 <span class="required">*</span></label>
                                        <input type="tel" class="form-control" id="phone" th:field="*{phone}" 
                                               th:classappend="${#fields.hasErrors('phone')} ? 'is-invalid'" 
                                               placeholder="请输入手机号码" required>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('phone')}" th:errors="*{phone}"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="gender" class="form-label">性别</label>
                                        <select class="form-select" id="gender" th:field="*{gender}">
                                            <option value="">请选择性别</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="birthday" class="form-label">生日</label>
                                        <input type="date" class="form-control" id="birthday" th:field="*{birthday}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="memberLevel" class="form-label">会员等级</label>
                                        <select class="form-select" id="memberLevel" th:field="*{memberLevel}">
                                            <option th:each="level : ${memberLevels}" 
                                                    th:value="${level}" 
                                                    th:text="${level}">普通会员</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="customerSource" class="form-label">客户来源</label>
                                        <select class="form-select" id="customerSource" th:field="*{customerSource}">
                                            <option th:each="source : ${customerSources}" 
                                                    th:value="${source}" 
                                                    th:text="${source}">朋友介绍</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- 车辆信息 -->
                            <div class="form-section">
                                <h5><i class="fas fa-car me-2"></i>车辆信息</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="carNumber" class="form-label">车牌号码 <span class="required">*</span></label>
                                        <input type="text" class="form-control" id="carNumber" th:field="*{carNumber}" 
                                               th:classappend="${#fields.hasErrors('carNumber')} ? 'is-invalid'" 
                                               placeholder="请输入车牌号码" required>
                                        <div class="invalid-feedback" th:if="${#fields.hasErrors('carNumber')}" th:errors="*{carNumber}"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="carBrand" class="form-label">车辆品牌</label>
                                        <select class="form-select" id="carBrand" th:field="*{carBrand}">
                                            <option th:each="brand : ${carBrands}" 
                                                    th:value="${brand}" 
                                                    th:text="${brand}">奔驰</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="carModel" class="form-label">车辆型号</label>
                                        <input type="text" class="form-control" id="carModel" th:field="*{carModel}" 
                                               placeholder="请输入车辆型号">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="carColor" class="form-label">车辆颜色</label>
                                        <select class="form-select" id="carColor" th:field="*{carColor}">
                                            <option th:each="color : ${carColors}" 
                                                    th:value="${color}" 
                                                    th:text="${color}">白色</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- 账户信息 -->
                            <div class="form-section">
                                <h5><i class="fas fa-wallet me-2"></i>账户信息</h5>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="balance" class="form-label">账户余额</label>
                                        <div class="input-group">
                                            <span class="input-group-text">¥</span>
                                            <input type="number" class="form-control" id="balance" th:field="*{balance}" 
                                                   step="0.01" min="0" placeholder="0.00">
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="points" class="form-label">积分余额</label>
                                        <input type="number" class="form-control" id="points" th:field="*{points}" 
                                               min="0" placeholder="0">
                                    </div>
                                </div>
                            </div>

                            <!-- 备注信息 -->
                            <div class="form-section">
                                <h5><i class="fas fa-sticky-note me-2"></i>备注信息</h5>
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label for="remarks" class="form-label">备注</label>
                                        <textarea class="form-control" id="remarks" th:field="*{remarks}" 
                                                  rows="3" placeholder="请输入备注信息"></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-end">
                                        <a href="/customers" class="btn btn-outline-secondary me-2">
                                            <i class="fas fa-times me-2"></i>取消
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i>
                                            <span th:text="${customer.id != null ? '更新客户' : '保存客户'}">保存客户</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 表单验证脚本 -->
    <script>
        // 表单验证
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        // 手机号验证
        document.getElementById('phone').addEventListener('blur', function() {
            const phone = this.value;
            const phonePattern = /^1[3-9]\d{9}$/;
            
            if (phone && !phonePattern.test(phone)) {
                this.classList.add('is-invalid');
                this.nextElementSibling.textContent = '请输入正确的手机号码';
            } else {
                this.classList.remove('is-invalid');
            }
        });

        // 车牌号验证
        document.getElementById('carNumber').addEventListener('blur', function() {
            const carNumber = this.value;
            const carNumberPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            
            if (carNumber && !carNumberPattern.test(carNumber)) {
                this.classList.add('is-invalid');
                this.nextElementSibling.textContent = '请输入正确的车牌号码';
            } else {
                this.classList.remove('is-invalid');
            }
        });
    </script>
</body>
</html>
